<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>仿qq界面登陆</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <style>
        <!--登陆界面外边框-- >
        div.QQlogin {
            margin: 20px auto;
            width: 430px;
            height: 333px;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        }
        div.QQlogin aside{
            width: 100%;
            height: 180px;
            background-image: url("images/timg.jpg");
        }
        div.down{
            position: relative;
            height: 153px;
            background-color: #EBF2F9;
            margin-left: 0;
            margin-right: 0;
        }
    /*    定义头像*/
        div.down div.touxiang{
            height: 100%;
        }
        div.down div.touxiang > a{
            width: 81px ;
            height: 81px;
            display: inline-block;
            background: url("./images/touxiang.jpg") no-repeat;
            background-size: 81px 81px;
            margin-top: 20px;
            margin-left: 30px;
        }
        div.down div.touxiang dl{
            position: absolute;
            left: 100%;
            top: 53%;
        }
    /*    定义图像右下角小图标*/
        div.down div.touxiang dl span{
            display: inline-block;
            width: 14px;
            height: 14px;
            background-image: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2501407433,2963764528&fm=26&gp=0.jpg");
            background-size: 14px 14px;
            background-repeat: no-repeat;
        }
    /*    定义左下角切换用户*/
        div.down div.touxiang i.people{
            background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3703142947,1840964663&fm=26&gp=0.jpg") no-repeat;
            position: absolute;
            top: 75%;
            left: 10px;
            width: 35px;
            height: 35px;
            background-size: 35px 35px;
        }
        div.login-box{
            margin-top: 15px;
            margin-left: 20px;
        }
        dvi.login-box input{
            height: 30px;
            width: 195px;
            border: 1px solid #d1d1d1;
            padding-left: 10px;
            color: #7e7e7e;
        }
        div.login-box span.first{
            display: inline-block;
            position: absolute;
            width: 20px;
            height: 20px;
            /*background: url("./images/timg.jpg") no-repeat;*/
            margin-left: 168px;
            top: 34px;
        }
        div.login-box label{
            font-size: 12px;
            color: #656565;
            text-indent: 15px;
            margin-top: 10px;
            display: inline-block;
        }
        div.login-box label.auto-login{
            margin-left: 48px;
        }
        div.login-box input.three{
            width: 16px;
            height: 16px;
            margin-top: 1px;
            position: absolute;
            margin-left: -15px;
        }
        div.login-box input.four{
            width: 16px;
            height: 16px;
            margin-top: 1px;
            position: absolute;
            margin-left: -15px;
        }
        div.login-box button{
            display: block;
            width: 195px;
            height: 30px;
            background-color: #16a8de;
            color: #fff;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 600;
        }
        div.register{
            position: absolute;
            margin-top: 22px;
            margin-left: 335px;
        }
        div.register a{
            color: #2685e3;
            display: block;
            width: 60px;
            font-size: 13px;
            font-family: '微软雅黑';
        }
        div.register a.find-password{
            margin-top: 13px;
        }
    </style>
</head>
<body class="container">
<div class="QQlogin">
    <aside></aside>
    <div class="row down">
        <div class="col-3 touxiang">
            <a href="#"></a>
            <dl>
                <dt><a href="#"><span class="online"></span></a></dt>
                <dd></dd>
            </dl>
            <i class="people"></i>
        </div>
        <div class="col-6 login-box">
            <input type="text" placeholder="QQ号码/手机/邮箱"><span class="first"></span>
            <input type="password" placeholder="密码"><span class="second"></span>
            <label><input type="checkbox" class="three">&nbsp;记住密码</label>
            <label class="auto-login"><input type="checkbox" class="four">&nbsp;自动登录</label>
            <button class="btn">登&nbsp;&nbsp;&nbsp;&nbsp;陆</button>
        </div>
        <div class="col-3 register">
            <a href="#">注册账号</a>
            <a href="#" class="find-password">找回密码</a>
        </div>

    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

